<template>
    <div >
      <div ref="chartB" style="width:200px; height:200px"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  
  export default {
    name: "EchartsDonut",
    data() {
      return {
        chartInstance: null,
      };
    },
    mounted() {
      this.initChart();
      window.addEventListener("resize", this.resizeChart);
    },
    beforeDestroy() {
      if (this.chartInstance) {
        window.removeEventListener("resize", this.resizeChart);
        this.chartInstance.dispose();
      }
    },
    methods: {
      initChart() {
        const chartDom = this.$refs.chartB;
        this.chartInstance = echarts.init(chartDom);
  
        const option = {
          // tooltip: {
          //   trigger: 'item'
          // },
          // legend: {
          //   orient: 'vertical',
          //   left: 'left'
          // },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "70%",
              data: [
              { value: 20, name: '兼职', itemStyle: { color: '#F25D5D' } },
              { value: 28, name: '全职', itemStyle:  { color: '#38C6A0' } },
               
  
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
  
        this.chartInstance.setOption(option);
      },
      resizeChart() {
        if (this.chartInstance) {
          this.chartInstance.resize();
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
  </style>